<template>
	<el-card shadow="hover" class="functional_item">
		<template slot="header">
			<i :class="data.icon"></i>
			<h2>{{ data.label }}</h2>
			<template v-if="status === '1'">
				<el-tag type="success" class="el-icon-success">已启用</el-tag>
			</template>
			<template v-if="status === '2'">
				<el-tag type="warning" class="el-icon-warning">已停用</el-tag>
			</template>
		</template>
		<el-button size="small" type="primary" @click="handleFunControl()">{{ buttonText }}</el-button>
	</el-card>
</template>

<script>
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	computed: {
		status() {
			return this.data.status;
		},
		buttonText() {
			if (this.status === '1') {
				return '停用功能';
			} else if (this.status === '2') {
				return '启用功能';
			}
		}
	},
	methods: {
		handleFunControl() {
			this.$emit('hand', this.status);
		}
	}
};
</script>

<style lang="scss" scoped>
.functional_item ::v-deep {
	padding: 15px;
	.el-card__header {
		display: flex;
		align-items: center;
		height: 24px;
		padding: 0;
		border-bottom: none;
		i[class^='el-icon-'] {
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background-color: #0c61b5;
			color: #fff;
			padding: 5px;
			box-sizing: border-box;
			margin-right: 6px;
		}
		h2 {
			font-size: 14px;
			font-weight: normal;
		}
		.el-tag {
			height: 24px;
			line-height: 24px;
			border: none;
			padding: 0 5px;
			margin-left: 6px;
			&::before {
				margin-right: 4px;
			}
		}
	}
	.el-card__body {
		padding: 0;
		margin-top: 25px;
	}
}
</style>
